.container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  /* 使用radial-gradient创建从中心向外的渐变阴影效果 */
  // &::before {
  //   content: '';
  //   position: absolute;
  //   top: 50%;
  //   left: 50%;
  //   transform: translate(-50%, -50%);
  //   width: 100%;
  //   height: 100%;
  //   border-radius: 50%;
  //   background: radial-gradient(circle at center,
  //       rgba(0, 0, 0, 0.5) 0%,
  //       rgba(0, 0, 0, 0.2) 25%,
  //       rgba(0, 0, 0, 0.02) 50%,
  //       transparent 100%);
  //   z-index: -1;
  //   pointer-events: none;
  // }
}

.circle {
  position: relative;
  border: 2px dashed var(--theme-color-primary);
  border-radius: 50%;
  background-color: var(--theme-bg-base);
  opacity: 0.88;
  /* 使用clip-path创建环形挖空效果 - 使用mask实现 */
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 50px, black 50px);
  mask: radial-gradient(circle at 50% 50%, transparent 50px, black 50px);
  width: 0%;
  height: 0%;
  transition: all 0.3s ease;

  &.animate {
    width: 50%;
    height: 50%;
  }

  &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 101px;
    height: 101px;
    border: 1px solid var(--theme-border-base);
    border-radius: 50%;
  }
}

.closeBtn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.stationItem {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.3s ease;
  transform-origin: center center;
  border: 1px solid var(--theme-border-base);
  border-radius: 50%;
  padding: 8px;
  background-color: var(--theme-bg-base);

  &:hover {
    >:nth-child(1) {
      transform: scale(1.15) !important;
    }

    padding: 10px;
    border-width: 2px;
    font-size: 16px;

    .name {
      font-weight: bold;
    }
  }
}

.stationItem.selected {
  border-color: var(--theme-color-primary);
}

.name {
  font-size: 12px;
  color: var(--theme-text-base);
  width: 60px;
  text-align: center;
  position: absolute;
  top: 100%;
  /* 添加halo阴影效果，提高文字可读性 */
  text-shadow:
    0 0 3px var(--theme-bg-base),
    0 0 6px var(--theme-bg-base),
    0 0 9px var(--theme-bg-base),
    0 0 12px var(--theme-bg-base),
    0 0 15px var(--theme-bg-base);
}